<template>
	<view style="background-color: #f0f0f5;height: 100vh;">
		<view class="vip-card">
			<view class="card-title">
				<text>{{cardInfo.memberPolicy}}</text>
				<text>NO:{{cardInfo.cardCode}}</text>
			</view>
			<view class="card-phone">
				<u-icon name="phone-o" /><text>:{{cardInfo.memberPhone}}</text>
			</view>
			<view class="end-date">
				<text>有效期至:{{cardInfo.expirationTime}}</text>
			</view>
		</view>
		<view style="background-color: #fff;width: 100vw;">
			<view class="card-money">
				<view class="">
					<text>{{cardInfo.balance}}</text>
					<text class="text">余额</text>
				</view>
				<view class="">
					<text>{{cardInfo.sumIntegral}}</text>
					<text class="text">积分</text>
				</view>
			</view>
		</view>

		<view class="card-server" v-if="switchRecharge==1 || switchRechargeRecord==1 || switchRecord==1">
			<view class="server-item" v-if="switchRecharge==1" @click="currentServer('recharge')">
				<u-icon name="rmb-circle" color="#007AFF" size="30" />
				<text>会员充值</text>
			</view>
			<view class="server-item" v-if="switchRecharge==1" @click="currentServer('giveCoupon')">
				<u-icon name="coupon-fill" color="#e6e230" size="30" />
				<text>兑换券</text>
			</view>
			<view class="server-item" v-if="switchRechargeRecord==1" @click="currentServer('record',1)">

				<u-icon name="order" size="30" color="#00b33c" />
				<text>充值记录</text>
			</view>
			<view class="server-item" v-if="switchRecord==1" @click="currentServer('record',2)">
				<u-icon name="calendar" color="#ff751a" size="30" />
				<text>消费记录</text>
			</view>
		</view>
		<view class="recharge" v-show="showRecharge">
			<view class="recharge-title">
				<text>充值金额</text>
			</view>
			<view class="recharge-money">
				<text @click="clickRechargeMoney(item,index)" v-for="(item,index) in amountList"
					:class="index===currentAmount?'activeAmount':''" :key="index">{{item}}</text>
			</view>
			<view class="give-thing">
				<view>
					赠送：
					<text style="color: red;">{{rechargeParams.giveMoney?rechargeParams.giveMoney:0}}</text>元
				</view>
				<view>
					赠送券：
					<text style="color: red;">{{giveCouponCount}}</text>张
				</view>
			</view>

		</view>
		<view class="recharge-btn" v-show="showRecharge">
			<u-button shape="circle" type="primary" @click="createRecharge">充值</u-button>
		</view>
		<view class="record" v-show="showRecord">
			<view class="record-title">
				<text>{{serverType===1?'充值记录':'消费记录'}}</text>
			</view>
			<view class="select-date">
				<view class="date">
					<text style="padding: 0 15rpx;">开始: </text>
					<view class="date-picker" @click="showStart=true">
						<u-icon name="calendar" color="#007AFF" size="23" />
						<text>{{recordParams.startDate}}</text>
					</view>
				</view>
				<view class="date">
					<text style="padding: 0 15rpx;">结束: </text>
					<view class="date-picker" @click="showEnd=true">
						<u-icon name="calendar" color="#007AFF" size="23" />
						<text>{{recordParams.endDate}}</text>
					</view>
				</view>
			</view>
			<view class="record-list">
				<view class="recharge-list" v-show="serverType===1">
					<view class="recharge-title">
						<text>充值时间</text>
						<text>充值金额</text>
						<text>会员余额</text>
						<text>充值方式</text>
					</view>
					<view class="recharge-item" v-for="item in rechargeList" :key="item.operateDate">
						<text>{{item.operateDate}}</text>
						<text>{{item.rechargeMoney}}</text>
						<text>{{item.currBalance}}</text>
						<text>{{item.rechargeType}}</text>
					</view>
				</view>
			</view>
			<view class="record-list">
				<view class="recharge-list" v-show="serverType==2">
					<view class="recharge-title">
						<text>消费时间</text>
						<text>消费名称</text>
						<text>消费金额</text>
						<text>消费方式</text>
					</view>
					<view class="recharge-item" v-for="item in costList" :key="item.operateDate">
						<text>{{item.operateDate}}</text>
						<text>{{item.ticketName}}</text>
						<text>{{item.cardPayAmount}}</text>
						<text>{{item.channelName}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="coupon-list" v-show="showGiveCoupon">
			<view class="list-item" v-for="(item,index) in giveCouponList" :key="index"
				:style="{opacity:checkCouponDate(item.realStartDate,item.realEndDate)?'1':'0.4'}"
				@click="showCouponInfo(item.hallCode)">
				<text>{{item.giveCouponPolicyName}}</text>
				<text>{{item.realStartDate}}</text>
				<text>至</text>
				<text>{{item.realEndDate}}</text>
			</view>
		</view>
		<couponTip :showCouponTips='showCouponTips' :hallCode='hallCode'></couponTip>
		<view class="recharge-btn" v-show="showRecord">
			<u-button round custom-class="rebtn" @click="queryRecord">查询</u-button>
		</view>
		<u-datetime-picker :minDate="minDate" :maxDate="currentTime" :show="showStart" mode="date"
			@confirm='confirmStartDate' closeOnClickOverlay></u-datetime-picker>
		<u-datetime-picker :minDate="minDate" :maxDate="currentTime" :show="showEnd" mode="date"
			@confirm='confirmEndDate' closeOnClickOverlay></u-datetime-picker>
	</view>
</template>

<script>
	import {
		getCardInfo,
		getCardPolicy,
		creatRechargeOrder,
		rechargePay,
		getRechargeList,
		getCostList,
		getGiveMoney,
		getGiveCoupon,
		getRechargeAmount,
		queryGiveCouponList
	} from '../../common/http/api.js'
	import {
		pastDate,
		currentDate
	} from '../../common/timer.js'
	import moment from 'moment';

	import couponTip from '../../components/common/couponTip.vue'
	export default {
		components: {
			couponTip
		},
		data() {
			return {
				cardInfo: {},
				showRecharge: true,
				showGiveCoupon: false,
				showRecord: false,
				showStart: false,
				showEnd: false,
				showCouponTips: false,
				hallCode: '',
				currentTime: new Date().getTime(),
				serverType: 1,
				currentAmount: 0,
				amountList: [],
				minDate: null,
				getCardParams: {
					cardCode: '',
					password: ''
				},
				rechargeParams: {
					openId: uni.getStorageSync("openId"),
					amount: "",
					count: "1",
					cardCode: "",
					password: "",
					rechargeType: "cz",
					giveMoney: "",
					rechargeMoney: '',
					policyId: '',
					giveCouponPolicyId: ''
				},
				recordParams: {
					cardCode: "",
					password: "",
					startDate: '',
					endDate: ''
				},
				rechargeList: [],
				costList: [],
				switchRecharge: 1,
				switchRecord: 1,
				switchRechargeRecord: 1,
				giveCouponCount: 0,
				giveCouponList: []
			};
		},
		onLoad(options) {
			this.initData(options)
			this.getCard();
			this.switchRecharge = this.$store.state.cinemaConfig.switchRecharge;
			this.switchRecord = this.$store.state.cinemaConfig.switchRecord;
			this.switchRechargeRecord = this.$store.state.cinemaConfig.switchRechargeRecord;
			uni.setNavigationBarTitle({
				title: this.$store.state.cinemaName
			})
		},
		methods: {
			confirmEndDate(e) {
				this.recordParams.endDate = moment(e.value).format('YYYY-MM-DD')
				this.showEnd = false
			},
			confirmStartDate(e) {
				this.recordParams.startDate = moment(e.value).format('YYYY-MM-DD')
				this.showStart = false
			},
			getAmount() {
				this.amountList = []
				getRechargeAmount().then(res => {
					const {
						code,
						list
					} = res;
					if (code == '000') {
						list.find(item => {
							if (item.policyId == this.cardInfo.policyId && item.type == 'CZ') {
								for (let i = 1; i <= 6; i++) {
									if (item[`rechargeMoney${i}`] != null || item[`rechargeMoney${i}`] >
										0) {
										this.amountList.push(item[`rechargeMoney${i}`])
									}

								}
								this.rechargeParams.amount = this.amountList[0]
								this.getMoney()
								this.getGiveCouponInfo();
							}
						})
					} else {
						uni.showToast({
							title: "获取重置金额异常",
							icon: "none"
						})
					}
				})
			},
			showCouponInfo(hallCode) {
				this.hallCode = hallCode
				this.showCouponTips = true
				setTimeout(() => {
					this.showCouponTips = false
				}, 3000)
			},
			queryGiveCoupon(cardCode) {
				queryGiveCouponList({
					cardCode
				}).then(res => {
					const {
						code,
						obj
					} = res
					if (code === '000') {
						this.giveCouponList = obj
						this.giveCouponList.sort((a, b) => {
							return this.checkCouponDate(b.realStartDate, b.realEndDate) - this
								.checkCouponDate(a.realStartDate, a.realEndDate)
						})
					}
				})
			},
			getCard() {
				//获取会员卡信息
				getCardInfo(this.getCardParams).then(res => {
					const {
						data,
						code
					} = res
					this.cardInfo = data
					this.rechargeParams.policyId = data.policyId
					if (this.switchRecharge == 1) {
						this.getAmount()
					}
				})
			},
			//选择功能
			currentServer(name, type = '') {
				if (name === 'recharge') {
					this.showRecharge = true
					this.showRecord = false
					this.showGiveCoupon = false
					this.rechargeParams.amount = this.amountList[0]
					this.rechargeParams.rechargeMoney = this.amountList[0]
					this.getMoney()
					this.getGiveCouponInfo()
				} else if (name === 'giveCoupon') {
					this.showGiveCoupon = true
					this.showRecord = false
					this.showRecharge = false
				} else {
					this.showRecharge = false
					this.showGiveCoupon = false
					this.showRecord = true
					this.serverType = type
				}
			},
			//选择金额
			clickRechargeMoney(amount, index) {
				this.rechargeParams.amount = amount
				this.rechargeParams.rechargeMoney = amount
				this.currentAmount = index
				this.getMoney()
				this.getGiveCouponInfo()

			},
			closeStart() {
				this.showStart = false
			},
			closeEnd() {
				this.showEnd = false
			},
			getMoney() {
				getGiveMoney(this.rechargeParams).then(res => {
					const {
						data
					} = res
					if (data) {
						this.rechargeParams.giveMoney = data.giveMoney
					} else {
						this.rechargeParams.giveMoney = '0'
					}
				})
			},
			getGiveCouponInfo() {
				getGiveCoupon(this.rechargeParams).then(res => {
					const {
						data
					} = res
					if (data) {
						this.giveCouponCount = data.giveCount
						this.rechargeParams.giveCouponPolicyId = data.giveCouponPolicyId
					} else {
						this.giveCouponCount = '0'
						this.rechargeParams.giveCouponPolicyId = ''

					}

				})
			},
			createRecharge() {
				if (!this.rechargeParams.amount) {
					uni.showToast({
						title: "请选择充值金额",
						icon: "none"
					})
					return
				}
				//会员卡充值创建订单
				creatRechargeOrder(this.rechargeParams).then(res => {
					const {
						data: {
							orderNo
						}
					} = res
					rechargePay({
						orderNo: orderNo,
						openId: uni.getStorageSync("openId"),

					}).then(res => {
						const {
							data
						} = res;
						uni.requestPayment({
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							appId: data.appId,
							success: res => {
								if (res.errMsg === "requestPayment:ok") {
									uni.showToast({
										title: "充值成功"
									})

								}
								this.getCard()
							},
							fail: err => {
								console.log(err)
							}
						})
					})

				})
			},
			initData(options) {
				this.recordParams.startDate = currentDate()
				this.recordParams.endDate = currentDate()
				this.minDate = new Date(pastDate(365)).getTime()
				this.getCardParams.cardCode = options.cardCode
				this.recordParams.cardCode = options.cardCode
				this.rechargeParams.cardCode = options.cardCode
				this.getCardParams.password = options.password
				this.recordParams.password = options.password
				this.rechargeParams.password = options.password
				this.queryGiveCoupon(options.cardCode)
			},
			queryRecord() {
				if (this.serverType === 1) {
					getRechargeList(this.recordParams).then(res => {
						const {
							data,
							resultCode,
							msg
						} = res
						if (resultCode === '000') {
							this.rechargeList = data.rechargeInfoList
						} else {
							uni.showToast({
								title: msg,
								icon: "none"
							})
						}
					})
				} else {
					getCostList(this.recordParams).then(res => {
						const {
							data,
							resultCode,
							msg
						} = res
						if (resultCode === '000') {
							this.costList = data.ticketInfoList
						} else {
							uni.showToast({
								title: msg,
								icon: "none"
							})
						}
					})
				}
			}
		},
		computed: {
			getTime() {
				return date => {

					let futureDate = new Date(date);
					const year = futureDate.getFullYear();
					const month = futureDate.getMonth() + 1 < 10 ? "0" + (futureDate.getMonth() + 1) : futureDate
						.getMonth() + 1;
					const day = futureDate.getDate() < 10 ? "0" + futureDate.getDate() : futureDate.getDate();
					const dateStr = year + "-" + month + "-" + day;
					return dateStr

				}
			},
			checkCouponDate() {
				return (start, end) => {
					return moment().isBetween(start, end)
				}
			}
		}
	}
</script>

<style lang="scss">
	@import url(../../common/css/couponStyle.css);

	.give-thing {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 0 30rpx;
	}

	.vip-card {
		width: 95vw;
		height: 300rpx;
		margin: auto;
		border: 1px solid #007AFF;
		border-radius: 20rpx;
		background: linear-gradient(#668cff, #4d79ff, #3366ff);
		padding-top: 20rpx;

		.card-title {
			text {
				display: block;
				margin: 5rpx 0 0 20rpx;
				color: #fff;
			}
		}

		.card-phone {
			margin-top: 30rpx;
			border-bottom: 1px solid #fff;
			height: 120rpx;
			padding-left: 20rpx;
			color: #fff;
			display: flex;
		}

		.end-date {
			color: #f0f0f5;
			font-size: 26rpx;

			text {
				line-height: 55rpx;
				margin-left: 20rpx;
			}
		}
	}


	.card-money {
		margin: 20rpx auto;
		width: 60vw;
		display: flex;
		justify-content: space-between;
		padding: 15rpx 60rpx;

		text-align: center;

		view {
			text {
				display: block;
			}

			.text {
				font-size: 24rpx;
				color: #999;

			}
		}
	}

	.card-server {
		background-color: #fff;
		width: 100vw;
		padding: 20rpx 0;
		display: flex;
		margin-bottom: 20rpx;

		.server-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 130rpx;
			margin-left: 35rpx;
			justify-content: space-between;
			padding: 15rpx 0;

			text {
				font-size: 28rpx;
			}
		}
	}

	.recharge {
		background-color: #fff;
		width: 100vw;
		padding: 20rpx 0;

		.recharge-title {
			border-bottom: 1px solid #f0f0f5;

			text {
				line-height: 60rpx;
				font-size: 28rpx;
				margin-left: 30rpx;
			}
		}

		.recharge-money {
			width: 94vw;
			margin: auto;
			display: flex;
			flex-wrap: wrap;

			text {
				border: 1px solid #f0f0f5;
				display: block;
				padding: 10rpx 20rpx;
				width: 120rpx;
				text-align: center;
				color: #007AFF;
				font-size: 28rpx;
				margin: 10rpx 0 0 50rpx;
			}

			.activeAmount {
				border: 1px solid #007AFF;
			}
		}
	}

	.recharge-btn {
		position: fixed;
		bottom: 20rpx;
		width: 100vw;
		box-sizing: border-box;
		display: flex;
		justify-content: center;

		.rebtn {
			width: 94vw;
			color: #fff;
			height: 70rpx;
			background: linear-gradient(to right, #668cff, #4d79ff, #3366ff);


		}
	}

	.record {
		background-color: #fff;
		width: 100vw;
		padding: 20rpx 0;

		.record-title {
			border-bottom: 1px solid #f0f0f5;

			text {
				line-height: 60rpx;
				font-size: 28rpx;
				margin-left: 30rpx;
			}
		}

		.select-date {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;

			border-bottom: 1px solid #f0f0f5;

			.date {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: #999;

				padding: 3rpx 10rpx;

				text {
					line-height: 50rpx;
				}

				.date-picker {
					border: 1px solid #007AFF;
					padding: 3rpx 10rpx;
					display: flex;
					align-items: center;
					margin-left: 10rpx;
					width: 220rpx;

					text {
						margin-left: 10rpx;
					}
				}
			}
		}
	}

	.record-list {
		.recharge-list {
			padding-bottom: 50rpx;

			.recharge-title {
				display: flex;
				border-bottom: 1px solid #f0f0f5;

				text {
					width: 25vw;
					text-align: center;
					font-size: 28rpx;
					color: #999;
					display: block;
					line-height: 70rpx;
				}
			}

			.recharge-item {
				display: flex;
				border-bottom: 1px solid #f0f0f5;
				align-items: center;

				text {
					width: 25vw;
					text-align: center;
					font-size: 28rpx;
					color: #999;
					display: block;
					line-height: 50rpx;
				}
			}
		}
	}

	.coupon-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20rpx;

		.list-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #fff;
			width: 47%;
			height: 200rpx;
			font-size: 24rpx;
			text-align: center;
			margin-bottom: 15rpx;
			border-radius: 10rpx;
			background-size: 100% 100%;
			box-sizing: border-box;
			padding: 5rpx 0;

			text {
				margin-left: -20rpx;
			}

		}


	}
</style>